import React, { useState } from "react";
import { Input, Cell, DateSelect, Select } from "zarm";

// 实现表单
const Page = (props) => {
  const [title, setTitle] = useState("");
  const [date, setDate] = useState("2017-12-29");
  const [time, setTime] = useState("12:30");
  const [datetime, setDatetime] = useState("2017-12-29 12:30");
  const [selectVal, setSelectVal] = useState();

  const selectDataSource = [
    {
      id: "2",
      label: "上海市",
      // children: [
      //   { code: "21", label: "杨浦区" },
      //   { code: "22", label: "静安区" },
      // ],
    },
    {
      id: "1",
      label: "北京市",
      // children: [
      //   { code: "11", label: "海淀区" },
      //   { code: "12", label: "西城区" },
      // ],
    },
  ];

  return (
    <div style={{ paddingTop: "15px" }}>
      <Cell
        title={
          <span>
            文本 <span style={{ color: "red" }}>*</span>
          </span>
        }
      >
        <Input
          clearable
          type="text"
          placeholder="请输入"
          value={title}
          onChange={setTitle}
          onBlur={(value) => console.log(`onBlur: ${value}`)}
        />
      </Cell>
      <Cell title="数字">
        <Input
          clearable
          type="number"
          placeholder="请输入"
          onBlur={(value) => console.log(`onBlur: ${value}`)}
        />
      </Cell>
      <Cell title="多行文本">
        <Input
          type="text"
          rows={3}
          placeholder="请输入"
          type="text"
          placeholder="请输入"
        />
      </Cell>
      <Cell title="价格">
        <Input
          clearable
          type="price"
          placeholder="请输入"
          onBlur={(value) => console.log(`onBlur: ${value}`)}
        />
      </Cell>
      <Cell title="身份证">
        <Input
          clearable
          type="idcard"
          placeholder="请输入"
          onBlur={(value) => console.log(`onBlur: ${value}`)}
        />
      </Cell>
      <Cell title="日期">
        <DateSelect
          placeholder="请选择日期"
          mode="date"
          value={date}
          onOk={setDate}
          min="2017-12-29"
          max="2020-12-29"
        />
      </Cell>
      <Cell title="时间">
        <DateSelect
          placeholder="请选择时间"
          mode="time"
          value={time}
          onOk={(time) => {
            debugger;
            console.log(time);
            setTime(time);
          }}
        />
      </Cell>
      <Cell title="日期时间">
        <DateSelect
          placeholder="请选择时间和日期"
          mode="datetime"
          value={datetime}
          onOk={setDatetime}
        />
      </Cell>
      <Cell title="普通选择器">
        <Select
          value={selectVal}
          // wheelDefaultValue={"1"}
          dataSource={selectDataSource}
          onOk={(selected) => {
            console.log(selected);
            setSelectVal(selected[0].id);
          }}
          valueMember="id"
          // onOk={(selected) => {
          //   console.log('Select onOk: ', selected);
          //   this.setState({
          //     value: selected.map((item) => item.value),
          //   });
          // }}
        />
      </Cell>
    </div>
  );
};

export default Page;
